<template>
    <div class="layout">
        <el-container>
            <div class="head">
                <div class="title">
                    学校一览表
                </div>

                <div class="search">
                    <div class="keyword">学校名称</div>
                    <div class="value">
                        <el-input v-model="queryParams.name" placeholder="请输入学校名称进行检索" class="!w-200px" @change="getList" clearable/>
                    </div>
                    <div class="keyword">所属省份</div>
                    <div class="value">
                        <el-select v-model="queryParams.province" placeholder="请选择省份" filterable default-first-option @change="getList" clearable>
                            <el-option v-for="item in regionData" :label="item.label" :value="item.label"/>
                        </el-select>
                    </div>
                    <el-button color="rgba(25, 137, 250, 1)" v-hasPermi="['yxt:school:create']" plain type="success" @click="openForm('create')">
                        <Icon class="mr-5px" color="rgba(25, 137, 250, 1)" icon="ep:plus"/>
                        新增
                    </el-button>
                    <el-button :icon="Refresh" @click="getList" text bg/>
                </div>
            </div>

            <div class="body" v-loading="loading">
                <el-space wrap>
                    <div class="school-wrap" v-for="item in list" :key="item.id">
                        <div class="school-up" :style="getPicture(item)">
                            <div class="mask">
                                <div class="choose">
                                    <el-button v-hasPermi="['yxt:school:update']" @click="openForm('update', item.id)"
                                               :icon="Edit" type="text" round size="small" class="button">编辑
                                    </el-button>
                                    <el-button v-hasPermi="['yxt:school:update']" @click="handleFreeze(item.id, 1)"
                                               v-if="item.status == 0" :icon="Lock" type="text" round size="small" class="button">冻结
                                    </el-button>
                                    <el-button v-hasPermi="['yxt:school:update']" @click="handleFreeze(item.id, 0)"
                                               v-else :icon="Unlock" type="text" round size="small" class="button">解冻
                                    </el-button>
                                    <el-button v-hasPermi="['yxt:school:delete']" @click="handleDelete(item.id)"
                                               :icon="Delete" type="text" round size="small" class="button">删除
                                    </el-button>
                                </div>
                            </div>
                        </div>

                        <div class="school-down">
                            <div class="options">
                                <span class="sname">
                                    {{ item.name }}
                                </span>

                                <!-- <dict-tag :type="DICT_TYPE.YXT_ACTIVE_STATUS" :value="item.status"/> -->
                                <div class="tag" :class="['jh-tag','dj-tag'][item.status]">{{ ['激活', '冻结'][item.status] }}</div>

                                <div class="location">
                                    {{ item.address }}
                                </div>
                            </div>


                        </div>
                    </div>
                </el-space>
            </div>

            <el-footer class="footer" v-if="total>0">
                <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo" :total="total" @pagination="getList"/>
            </el-footer>
        </el-container>

        <SchoolForm ref="formRef" @success="getList"/>
    </div>
</template>

<script lang="ts" setup>
import {Delete, Edit, Lock, Refresh, Unlock} from "@element-plus/icons-vue";
import {useSchoolApi} from "@/api/yxt/school";
import {useConfirm, useMessage} from "@/components/Notice";
import SchoolForm from "@/views/yxt/school/SchoolForm.vue";
import {regionData} from "element-china-area-data";

defineOptions({name: 'SchoolData'})

const schoolApi = useSchoolApi();

const loading = ref<boolean>(false)
const total = ref(0)
const list = ref<Array<any>>([])
const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    name: '',
    province: '',
})
const schoolLogo=ref("https://yxt-app.oss-cn-beijing.aliyuncs.com/system/default_scholl_avatar.png")

function getPicture(item: any) {
    return {
        "background-image": "url('" + (item.picture || schoolLogo.value) + "')",
        "background-size": "cover",
        "background-position": "center center",
    }
}

async function getList() {
    loading.value = true
    try {
        const data = await schoolApi.getSchoolPage(queryParams)
        list.value = data.list
        total.value = data.total
    } finally {
        loading.value = false
    }
}

async function handleFreeze(id: number, toStatus: number) {
    let message = toStatus === 1 ? "冻结" : "解冻";
    useConfirm("确认" + message + "学校?", async () => {
        await schoolApi.updateStatus({
            id: id,
            status: toStatus
        });
        getList().finally(() => useMessage(message + "成功"));
    });
}

async function handleDelete(id: number) {
    useConfirm("确认删除学校?", async () => {
        await schoolApi.deleteSchool(id);
        getList().finally(() => useMessage("删除成功"));
    });
}

const formRef = ref()
const openForm = (type: string, id?: number) => {
    formRef.value.open(type, id)
}

//自适应
const screenHeight = ref(window.innerHeight);
const setRem = () => {
    const danwei = (screenHeight.value - topeElHeight.value) / 1010;
    const html = document.querySelector("html");
    if (html) html.style.fontSize = danwei + "px";
};

const topeElHeight = ref(85);
const topElement = document.getElementById("topppp");
// 检查是否成功获取到DOM元素
if (topElement) {
    // 获取高度
    topeElHeight.value = topElement.clientHeight;
} else {
    console.error("无法获取 topElement 的 DOM 元素");
}

onMounted(() => {
    setRem();
    getList();
})
</script>

<style lang="scss" scoped>
::v-deep {
    html {
        font-size: calc(100vh / 1010);
    }
}

.layout {
    width: calc(100% - 188rem);
    padding: 0 94rem;
    min-height: 88vh;
    background-color: rgba(255, 255, 255, 1);
    position: relative;

    .head {
        height: auto;
        margin: 55rem 0 0;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title {
            height: 30rem;
            font-size: 30rem;
            font-weight: bold;
            color: #303133;
            line-height: 20rem;
        }

        .search {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;

            .keyword {
                height: 16rem;
                line-height: 16rem;
                font-size: 16rem;
                margin-right: 20rem;
                color: rgba(0, 0, 0, 1);
            }

            .value {
                margin-right: 20rem;
                background: #FFFFFF;
                border-radius: 4rem;
                opacity: 1;
                border: 1rem solid #DCDFE6;
            }
        }
    }

    .body {
        margin-top: 45rem;

        .school-wrap {
            width: 260rem;
            height: 240rem;
            border-radius: 6rem;
            margin: 0 5rem 5rem 0;
            border: 1rem solid #d9d9d9;
            overflow: hidden;

            .school-up {
                height: 163rem;
                position: relative;
                background-size: 100% 100%;
                background-repeat: no-repeat;

                .name {
                    height: 15rem;
                    font-size: 15rem;
                    line-height: 15rem;
                    font-weight: bold;
                    color: #01474F;
                    position: absolute;
                    top: 36%;
                    left: 15rem;
                }

                .mask {
                    display: none;
                    width: 100%;
                    height: 50rem;
                    position: absolute;
                    bottom: 0;
                    top: unset;
                    background-color: rgba(0, 0, 0, 0.2);

                    .button {
                        color: #ffffff;
                        background: linear-gradient(45deg, #25C0AF, #6AE18B);
                    }

                    .choose {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
            }

            .school-down {
                height: 77rem;
                display: flex;
                flex-direction: column;
                background: #FFFFFF;

                .options {
                    width: 100%;
                    height: 77rem;
                    font-size: 13rem;
                    position: relative;

                    .sname {
                        height: 16rem;
                        font-size: 16rem;
                        font-weight: bold;
                        color: #333333;
                        line-height: 16rem;
                        position: absolute;
                        top: 17rem;
                        left: 15rem;
                    }

                    .dj-tag {
                        width: 40rem;
                        height: 20rem;
                        font-size: 12rem;
                        line-height: 20rem;
                        color: rgba(144, 147, 153, 1);
                        text-align: center;
                        background: #F0F2F5;
                        border-radius: 4rem 4rem 4rem 4rem;
                        opacity: 1;
                        border: 1rem solid rgba(144, 147, 153, 0.5);
                        position: absolute;
                        top: 17rem;
                        right: 15rem;
                    }

                    .jh-tag {
                        width: 40rem;
                        height: 20rem;
                        font-size: 12rem;
                        line-height: 20rem;
                        color: rgba(20, 178, 181, 1);
                        text-align: center;
                        background: #EBFFFB;
                        border-radius: 4rem 4rem 4rem 4rem;
                        opacity: 1;
                        border: 1rem solid rgba(68, 213, 181, 0.5);
                        position: absolute;
                        top: 17rem;
                        right: 15rem;
                    }
                }

                .location {
                    height: 15rem;
                    font-size: 15rem;
                    font-weight: 400;
                    color: #989898;
                    line-height: 15rem;
                    overflow: hidden;
                    word-break: normal;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    position: absolute;
                    top: 47rem;
                    left: 15rem;
                }
            }

            &:hover {
                .mask {
                    display: block;
                }
            }
        }
    }

    .footer {
        width: 800rem;
        height: auto;
        position: absolute;
        left: calc(50% - 400rem);
        bottom: 50rem;
        display: flex;
        justify-content: center;

        :deep(.el-pagination) {
            height: 100%;
            color: rgba(96, 98, 102, 1);

            .el-pagination__total {
                color: rgba(96, 98, 102, 1);
                font-size: 14rem;

            }

            .el-input__inner {
                height: 28rem;
            }

            .btn-prev {
                width: 30rem;
                height: 30rem;
                background: #F0F2F5;
                border-radius: 2rem 2rem 2rem 2rem;
                opacity: 1;

                .el-icon {
                    color: #606266;
                }
            }

            .btn-next {
                width: 30rem;
                height: 30rem;
                background: #F0F2F5;
                border-radius: 2rem 2rem 2rem 2rem;
                opacity: 1;

                .el-icon {
                    color: #606266;
                }
            }

            .el-pager li {
                min-width: 30rem; //一定要加！不然默认的宽度是32rem
                width: 30rem;
                height: 30rem;
                font-size: 14rem;
                font-weight: bold;
                border-radius: 4rem;
                color: rgba(96, 98, 102, 1); //字体颜色
                background: #F0F2F5; //背景色
                line-height: 30rem;
                margin: 0 10rem;

                &.active {
                    //选中时字体颜色、背景色变化
                    color: rgba(255, 255, 255, 1);
                    background: #1989FA;
                }
            }

            .el-pager .is-active {
                color: rgba(255, 255, 255, 1);
                background: #1989FA;
            }

            .el-pagination__jump .el-pagination__goto {
                color: rgba(96, 98, 102, 1);
            }

            .el-pagination__jump .el-pagination__classifier {
                color: rgba(96, 98, 102, 1);
            }

        }

        :deep(.el-input__wrapper) {
            height: 100%;
            border: 1rem solid #DCDFE6;
            box-shadow: 0 0 0 0rem var(--el-input-border-color, var(--el-border-color)) inset;
            cursor: default;

            .el-input__inner {
                color: rgba(96, 98, 102, 1);
            }
        }
    }
}
</style>
